<template>
	<template v-if="type == 'avatar'">
		<image class="avatar" :src="getAvator(avatar)" mode="aspectFill"></image>
	</template>
	<template v-if="type == 'avatar2'">
		<view class="avatar2-layout">
			<image class="avatar2" :src="getAvator(avatar)" mode="aspectFill"></image>
			<image class="leave-img" :src="picture"></image>
		</view>
	</template>
	<template v-if="type == 'avatar3'">
		<image class="avatar3" :src="getAvator(avatar)" mode="aspectFill"></image>
	</template>
	<template v-if="type == 'state'">
		<view class="state-row">
			<view class="circle" :class="state=='0'?'col-bg-aba':'col-bg-04b'"></view>
			<view :class="state=='0'?'col-aba':'col-04b'">{{stateText}}</view>
		</view>
	</template>
	<template v-if="type == 'state2'">
		<view class="state-row2">
			<view class="circle" :class="state=='0'?'col-bg-aba':'col-bg-04b'"></view>
			<view :class="state=='0'?'col-aba':'col-04b'">{{stateText}}</view>
		</view>
	</template>
	<template v-if="type == 'sex'">
		<image class="sex-img" :src="getSexImg(sex)" v-if="getSexImg(sex)"></image>
	</template>
	<template v-if="type == 'tag'">
		<view class="tag-layout">
			<view class="tag-item" v-for="(item, index) in getTagList(labelDescList)" :key="index">{{item}}</view>
		</view>
	</template>
	<template v-if="type == 'tag2'">
		<view class="tag-layout">
			<view class="tag-item2" v-for="(item, index) in getTagList(labelDescList)" :key="index">{{item}}</view>
		</view>
	</template>
	<template v-if="type == 'tag3'">
		<view class="tag-layout">
			<view class="tag-item3" v-for="(item, index) in getTagList(labelDescList)" :key="index">{{item}}</view>
		</view>
	</template>
	<template v-if="type == 'tag4'">
		<view class="tag-layout">
			<view class="tag-item4" v-for="(item, index) in getTagList(labelDescList)" :key="index">{{item}}</view>
		</view>
	</template>
	<template v-if="type == 'tag5'">
		<view class="tag-layout">
			<view class="tag-item5" v-for="(item, index) in getTagList(labelDescList)" :key="index">{{item}}</view>
		</view>
	</template>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
			},
			avatar: {
				type: String,
			},
			picture: {
				type: String,
			},
			state: {
				type: Number,
			},
			stateText: {
				type: String,
			},
			sex: {
				type: Number,
			},
			labelDescList: {
				type: Array,
			}
		},
		computed: {
			getAvator(){
				return (avator) => {
					if(avator){
						return avator
					}else{
						return this.asserts.ic_avatar_default
					}
				}
			},
			getSexImg(){
				return (sex) => {
					if(sex == 0){
						return this.asserts.ic_sex_women
					}else if(sex == 1){
						return this.asserts.ic_sex_men
					}else{
						return ''
					}
				}
			},
			getTagList(){
				return (labelDescList) => {
					if(this.labelDescList){
						return this.labelDescList
					}else{
						return []
					}
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.avatar{
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	.avatar2-layout{
		margin-right: 32rpx;
		position: relative;
		.avatar2{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
		.leave-img{
			width: 112rpx;
			height: 40rpx;
			position: absolute;
			bottom: -10rpx;
			left: 8rpx;
		}
		
	}
	.avatar3{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.sex-img{
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}
	
	.state-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.state-row2{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		margin-bottom: 8rpx;
	}
	.circle{
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}
	.col-bg-04b{
		background-color: #04BC5C;
	}
	.col-bg-aba{
		background-color: #ABAFB7;
	}
	.col-04b{
		color: #04BC5C;
		
	}
	.col-aba{
		color: #ABAFB7;
	}
	
	.tag-layout{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.tag-item5{
			height: 40rpx;
			line-height: 40rpx;
			background: #F9F9F9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 22rpx;
			color: #ABAFB7;
			font-weight: 400;
			padding: 0 8rpx;
			box-sizing: border-box;
			margin-right: 8rpx;
			margin-bottom: 8rpx;
		}
		.tag-item,
		.tag-item2,
		.tag-item3,
		.tag-item4{
			height: 48rpx;
			line-height: 48rpx;
			padding: 0 16rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
		.tag-item{
			background: #EEEEEE;
			color: #585F70;
			font-size: 22rpx;
		}
		.tag-item2{
			background: rgba(226, 254, 253, 0.2);
			color: #EEEEEE;
			font-size: 24rpx;
		}
		.tag-item3{
			color: #FFFFFF;
			background: #585F70;
			font-size: 24rpx;
		}
		.tag-item4{
			background: #EEEEEE;
			font-size: 22rpx;
			color: #585F70;
		}
	}
	
</style>
